<template>
    <view>
        <!-- pages/afterplay/afterplay.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="false" :isBack="true">
                <view slot="backText" @tap="gotoSign">
                    <image src="/static/images/topbtn.png" mode="widthFix" style="width: 200rpx"></image>
                </view>
                <view slot="content">追剧</view>
            </cu-custom>
        </view>
        <view class="flex align-center margin-lr-sm margin-top-xs">
            <view class="text-lg text-black text-bold">最近观看</view>
        </view>
        <view class="flex align-center flex-wrap margin-sm">
            <view class="zjitem" @tap="gotoPlay" :data-id="item.video_id" v-for="(item, index) in history" :key="index">
                <view class="zjitempic">
                    <image :src="item.vertical_cover" mode="widthFix"></image>
                </view>

                <view class="zjitemtitle flex align-center justify-center text-cut text-black">{{ item.title }}</view>
            </view>
        </view>

        <view class="flex align-center margin-lr-sm margin-top justify-between">
            <view class="text-lg text-black text-bold">我的追剧</view>
            <view class="flex align-center">
                <view class="titleimg">
                    <image src="/static/images/zjicon.jpg" mode="widthFix"></image>
                </view>
                <text class="titleicon cuIcon-notice lg text-black"></text>
            </view>
        </view>
        <view class="zjlist margin-lr-sm margin-top-xs">
            <view class="zjlistitem flex align-center justify-between margin-top-sm" v-for="(item, index) in myafter" :key="index">
                <view class="zjlistitempic" @tap="gotoPlay" :data-id="item.video_id" :data-num="item.chapnum_read">
                    <image :src="item.vertical_cover" mode="widthFix"></image>
                </view>

                <view class="zjlistitemcont flex align-start justify-center flex-direction margin-left" @tap="gotoPlay" :data-id="item.video_id" :data-num="item.chapnum_read">
                    <view class="text-xl text-bold text-black">{{ item.title }}</view>
                    <view class="margin-top-sm">
                        看到
                        <text class="text-orange margin-left-xs">第{{ item.chapnum_read }}集</text>
                    </view>
                    <view class="margin-top-xs">
                        更新至
                        <text class="text-black margin-left-xs">第{{ item.chapnum_recent }}集</text>
                    </view>
                </view>

                <view class="zjlistitemright flex align-center justify-center" @tap="deleteItem" :data-id="item.video_id">
                    <text class="zjlistitemicon cuIcon-delete lg text-gray"></text>
                </view>
            </view>
        </view>

        <view class="flex align-center margin-lr-sm margin-top-lg">
            <view class="text-lg text-black text-bold">猜你喜欢</view>
        </view>
        <view class="flex align-center flex-wrap margin-sm">
            <view class="zjitem" @tap="gotoPlay" :data-id="item.id" v-for="(item, index) in like" :key="index">
                <view class="zjitempic">
                    <image :src="item.vertical_cover" mode="widthFix"></image>
                </view>

                <view class="zjitemtitle flex align-center justify-center text-cut text-black">{{ item.title }}</view>
            </view>
        </view>

      <!--  <bar :tabon="0"></bar> -->
    </view>
</template>

<script>
import bar from '../../components/Bar';
// pages/afterplay/afterplay.js
const _api = require('../../utils/api.js');
const apiurl = require('../../utils/apiurl/public.js');
export default {
    components: {
        bar
    },
    data() {
        return {
            history: [],
            //最近观看列表
            myafter: [],
            //我的追剧
            like: [] //猜你喜欢
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getHistory();
        this.getAfter();
        this.getLike();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getHistory();
        this.getAfter();
        this.getLike();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getHistory() {
            // uni.showLoading({
            //     title: '数据加载中'
            // });
            _api.get(apiurl.userreads, {
                limit: 16,
                page: 1
            }).then((res) => {
                uni.hideLoading();
                if (res.data.code == 0) {
                    this.setData({
                        history: res.data.data
                    });
                } else if (res.data.code == 103) {
                    // uni.showToast({
                    //     title: '登录失效',
                    //     icon: 'error'
                    // });
                    setTimeout(() => {
                        uni.hideToast();
                        uni.redirectTo({
                            url: '/pages/mine/mine'
                        });
                    }, 2000);
                    uni.clearStorageSync();
                }
            });
        },

        getAfter() {
            
            this.setData({
                myafter: []
            });
            _api.get(apiurl.userfavorites, {
                limit: 4,
                page: 1
            }).then((res) => {
                uni.hideLoading();
                if (res.data.code == 0) {
                    this.setData({
                        myafter: res.data.data
                    });
                }
            });
        },

        getLike() {
            //猜你喜欢
            _api.get(apiurl.recom, {
                type: 'guess_like'
            }).then((res) => {
                if (res.data.code == 0) {
                    this.setData({
                        like: res.data.data
                    });
                }
            });
        },

        gotoPlay(e) {
            //跳转到播放页
            let id = e.currentTarget.dataset.id;
            let num = e.currentTarget.dataset.num;
            let page = '/pages/play/play?id=' + id + '&num=' + num;
            // console.log(id);
            uni.navigateTo({
                url: page
            });
        },

        gotoSign() {
            uni.navigateTo({
                url: '/pages/signin/signin'
            });
        },

        deleteItem(e) {
            //删除追剧
            console.log(e.currentTarget.dataset.id);
            let id = e.currentTarget.dataset.id;
            _api.post(apiurl.cancelfavorite, {
                video_id: id
            }).then((res) => {
                if (res.data.code == 0) {
                    uni.showToast({
                        title: '取消成功！'
                    });
                    this.getAfter();
                }
            });
        }
    }
};
</script>
<style>
/* pages/afterplay/afterplay.wxss */
page {
    background: #ffffff;
    padding-bottom: 100rpx;
    padding-top: 160rpx;
}
.zjitem {
    width: 165rpx;
    margin-right: 16rpx;
}
.zjitem:nth-child(4n) {
    margin-right: 0;
}
.zjitempic {
    height: 260rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.zjitempic image {
    width: 100%;
    display: block;
    object-fit: cover;
}
.zjitemtitle {
    height: 50rpx;
    font-size: 24rpx;
    font-weight: bold;
}
.titleimg {
    width: 127rpx;
    margin-right: 10rpx;
}
.titleimg image {
    display: block;
    width: 100%;
}
.titleicon {
    font-size: 40rpx;
}

.zjlistitempic {
    height: 260rpx;
    flex: 0 0 165rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.zjlistitempic image {
    width: 100%;
    display: block;
    object-fit: cover;
}
.zjlistitemright {
    flex: 0 0 120rpx;
}
.zjlistitemcont {
    flex: 1;
    width: 400rpx;
}
.zjlistitemicon {
    font-size: 46rpx;
}
</style>
